<template>
  <div style="background-color: white;height: 600px;padding-left: 10px;padding-top: 10px;margin-top: 10px">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="formInline.number" placeholder="订单号" type="number"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名">
          <el-input v-model="formInline.username" placeholder="客户姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findall(currentPage,pageSize,formInline.number,formInline.username)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <hr>
    <div>
      <el-button type="primary" @click="insert">添加</el-button>
      <el-button type="danger" plain @click="deleteAll">批量删除</el-button>
    </div>
    <br>

    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="订单编号"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="订单类型"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tranType"
          label="运输类型"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="客户名称"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="beginCity"
          label="起点城市"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="endCity"
          label="终点城市"
          width="180"
          align="center">
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">查看
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,6,8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
    export default {
      name: "orderset",
      data() {
        return {
          formInline: {
            number: '',
            username: ''
          },
          tableData: [],
          currentPage: 1,
          pageSizes: [4, 6, 8],
          pageSize: 8,
          total: 0,
          types: [],
          multipleSelection: []

        }
      },
        methods: {
        newmsg(){
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tOrder/newmsg",
          }).then(resp => {

          })
        },
          insert() {
            this.$router.push(`/home/creatorder/rbasicinfo/:id`);
          },

          deleteAll() {
            let a = this.currentPage;
            let b = this.pageSize;
            let ids = [];
            console.log(this.multipleSelection)
            for (let i = 0; i < this.multipleSelection.length; i++) {
              let j = this.multipleSelection[i].contentId;
              ids.push(j);
            }
            ;
            console.log(ids);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$http({
                method: "DELETE",
                url: "http://localhost:8090/cmsContent",
                data: ids
              }).then(resp => {
                if (a > ((this.total - 1) / b) && ((this.total - 1) % b) == 0) {
                  this.findall(a - 1, b);
                  console.log(this.total)
                  console.log(this.total / b)
                  console.log(a);
                  console.log(b);
                } else {
                  this.findall(a, b);
                }

                if (resp.data.code == 1) {
                  //2. 信息提示
                  this.$message({
                    message: "" + resp.data.msg,
                    type: 'success'
                  });
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });

          },
          //多选矿数组赋值
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },

          //查看的方法
          handleEdit(index,row) {
            let id = row.orderId;
            this.$http({
              method: "GET",
              url: "http://localhost:8090/tOrder/newmsg",
            }).then(resp => {
            })
            this.$router.push(`/home/lookorder/${id}`);

          },
          //删除的方法
          handleDelete(index, row) {
            let id = row.contentId;
            let a = this.currentPage;
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$http({
                method: "DELETE",
                url: `http://localhost:8090/cmsContent/${id}`
              }).then(resp => {
                if (a > ((this.total - 1) / this.pageSize) && (((this.total - 1) % this.pageSize) == 0)) {
                  console.log(this.total);
                  this.findall(a - 1, this.pageSize);
                } else {
                  this.findall(a, this.pageSize);
                }

              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          // 页面大小的触发函数
          handleSizeChange(val) {

            //拿到当前的页面大小
            this.pageSize = val;
            //重新加载 数据
            this.findall(this.currentPage, this.pageSize);
          },
          //当前页面变化触发的函数
          handleCurrentChange(val) {

            this.currentPage = val;
            // 当前第几页发生了变化  重新加载数据
            this.findall(this.currentPage, this.pageSize);
          },
          findall(currentPage, pageSize, number, username) {
            if (this.formInline.number || this.formInline.username) {
              this.currentPage = 1;
            }
            this.$http({
              method: "GET",
              url: "http://localhost:8090/tOrder",
              params: {
                number: this.formInline.number,
                username: this.formInline.username,
                currentPage: this.currentPage,
                pageSize: this.pageSize
              }
            }).then(resp => {
              console.log(resp);

              this.tableData = resp.data.data.records;
              this.total = resp.data.data.total;
            })

          }
        },
      created() {
        this.findall(1, 8);
        /*this.newmsg();*/
      }
    }
</script>

<style scoped>

</style>
